<template>
	<view class="">
		<search placeholder="请输入渠道商名称/联系人" @input="inputChange" @rightclick="addChannel">
			
			<text style="margin-right: 20rpx;color: #fff;font-size: 28rpx;" slot="right">新增渠道</text>
			
		</search>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" :top="'100rpx'" @up="upCallback">
		  <uni-list>
			  <view class="item" @click="goDetail(item)" v-for="(item, index) in listdata" :key="index">
			  
			  	<text class="title">
			  		渠道名称：{{item.channelName|filterNull}}
			  	</text>
			  
			  	<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>
			  
			  	<view class="text-line">
			  		<text class="text-name">联系人:</text>
			  		<text class="text-value">{{item.contacts|filterNull}}</text>
			  	</view>
			  
				<view class="text-line" @click.stop="makecall(item.phone)">
					<text class="text-name">电话:</text>
					<text class="text-value" style="flex-grow: unset;">{{item.phone|filterNull}}</text>
					<image style="width: 30rpx;height: 30rpx;margin-left: 10rpx;" src="../../static/common/callPhone.png" mode="scaleToFill"></image>
					
				</view>
			  
			  	<view class="text-line">
			  		<text class="text-name">累计签约订单数:</text>
			  		<text class="text-value">{{item.totalRegisterCount|filterNull}}单</text>
			  	</view>
			  
				<u-line color="#efefef" :customStyle="{'display': 'block',}"></u-line>
			  
			  	<view style="display: flex; justify-content: space-between;align-items: center;margin: 20rpx 20rpx 0;">
					
					<text style="padding: 3rpx 8rpx;color: #fff;font-size: 24rpx;"
						:style="{
							'background-color':0==item.status?'#2FC38D':'#5d5d5d'
						}">
						
						{{0==item.status?'正常':1==item.status?'禁用':'--'}}
					</text>
					
					<u-icon name="arrow-right"></u-icon>
					
			  	</view>
			  
			  </view>
		  </uni-list>
		</mescroll-uni>
	</view>
</template>

<script>
	import titleContent from 'components/global/title-content.vue'
	import search from '../../components/search.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			titleContent,
			search
		},
		
	    data() {
			return {
				page: 1,
				listdata: [],
				searchWord: ""
			}
		},
		
		onLoad() {
			uni.$on('addchannel', res=>{
				this.page = 1;
				this.getData();
			})
		},
		
		methods: {
			
			
			//获取数据
			getData() {
				this.$u.api.channellist({
						parameters: this.searchWord,
						pageNo: this.page,
						type: 2
					}).then(
						res => {
							if (this.page == 1) {

                this.listdata = [];
              }
              this.listdata = this.listdata.concat(res);
              this.mescroll.endSuccess(res.length);
            }
					)
					.catch(() => {
						this.mescroll.endErr();
					})
			},
			
			//上拉加载回调
			upCallback(page) {
				console.log("触发了上拉加载" + page);
			
				this.page = page.num;
				this.getData();
			},
			//搜索监听事件
			inputChange(value) {
				this.searchWord = value;
				this.getData();
			},
			
			//点击item
			goDetail(item) {
				uni.navigateTo({
					url:'/pagesA/channel/channel_detail?id='+item.id
				})
			},
			
			addChannel(){
				uni.navigateTo({
					url:'/pagesA/channel/addchannel'
				})
			},
			
			makecall(phone){
				console.log('打电话', phone);
				
				if(!uni.$u.test.isEmpty(phone)){
					uni.makePhoneCall({
						phoneNumber:phone
					})
				}
			},
			
		}
	}
	
</script>

<style lang="scss" scoped>
	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: $black33;
		margin-left: 20rpx;
	}
</style>
